<template>
  <div class="contact-auth">
    <!-- 联系方式弹窗 -->
    <a-modal
      v-model:visible="visible"
      :title="title"
      :footer="null"
      width="300px"
      centered
    >
      <div class="qr-code-container">
        <a-typography-paragraph type="secondary" style="text-align: center">
          {{ description }}
        </a-typography-paragraph>
        <img
          :src="qrCodeSrc"
          alt="联系二维码"
          class="qr-code-image"
        />
        <a-typography-text type="secondary" style="display: block; text-align: center">
          {{ contactText }}
        </a-typography-text>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = withDefaults(defineProps<{
  qrCodeSrc?: string
  contactText?: string
  title?: string
  description?: string
}>(), {
  contactText: '技术支持微信',
  title: '联系我们',
  description: '扫码添加微信进行咨询'
})

const visible = ref(false)

const showModal = () => {
  visible.value = true
}

// 暴露方法给父组件
defineExpose({
  showModal
})
</script>

<style scoped>
.qr-code-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
}

.qr-code-image {
  width: 200px;
  height: 200px;
  margin: 16px 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  object-fit: contain;
  background: white;
}

.contact-auth :deep(.ant-modal-body) {
  padding: 16px !important;
}
</style>
